<template>
	<view class="layout">
		<view class="navbar">
			<view class="statusBar" :style="{height:getStatusBarHeight() +'px'}"></view>
			<view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">
				<view class="back">
					<uni-icons type="back"></uni-icons>
				</view>
				<view class="title">{{ title }}</view>
				<view></view>
			</view>
		</view>
		<view class="fill" :style="{height:getNavBarHeight()+'px'}"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from '@/utils/system.js'
defineProps({
	title:{
		type:String,
		default:"标题"
	}
})
</script>

<style lang="scss" scoped>
.layout{
	.navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		background:
		linear-gradient(to bottom,transparent,#fff 400rpx),
		linear-gradient(to right,#beecd8 20%,#f4e2d8);
		.statusBar{
		}
		.titleBar{
			display: flex;
			padding: 0 30rpx;
			justify-content: space-between;
			align-items: center;
			.back{
				padding: 0 20rpx;
			}
			.title{
				font-size: 40rpx;
				font-weight: 700;
				color: $text-font-color-1;
			}
		}
	}
}
</style>